/*
 *项目页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import {projectData} from '@app/constants/DataSource.jsx';
import { Row, Col, Tabs, Button, Icon, Card, Avatar, Breadcrumb, Progress, List, Spin, Divider, message} from 'antd';
import './ProjectTeam.css';
import $ from 'jquery';

const TabPane = Tabs.TabPane;

class ProjectTeam extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true,
      loadingMore: false,
      showLoadingMore: true,
      data:[]
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    let dataSource = [];
    $.get('http://localhost:3000/projectList',(json) =>{
        if(json.status === '0'){
          dataSource = json.data;
          dataSource.map(value => {
            value.key = value.project_id;
          })
          this.setState({data:dataSource});
        }
      });
    },300);
  }

  onLoadMore = () => {
    this.setState({
      loadingMore: true,
    });
    setTimeout(() => {
      this.setState({loadingMore:false});
       message.info('已显示全部信息');
    },300);
  }
   
  render() {  
    const { loading, loadingMore, showLoadingMore, data } = this.state;
    const loadMore = showLoadingMore ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore && <Spin />}
        {!loadingMore && <Button type="primary" onClick={this.onLoadMore}>更多</Button>}
      </div>
    ) : null;

    const List1 = [];
    const List2 = [];
    const List3 = [];
    const List4 = [];
    // projectData.map((i)=>{
    //   if(i.state === 0){
    //     List1.unshift(i);
    //   }else if(i.state === 2){
    //     List2.unshift(i);
    //   }else if(i.state === 1){
    //     List3.unshift(i);
    //   }
    //   List4.unshift(i);
    // });
    this.state.data.map((i)=>{
      if(i.state === '0'){
        List1.unshift(i);
      }else if(i.state === '2'){
        List2.unshift(i);
      }else if(i.state === '1'){
        List3.unshift(i);
      }
      List4.unshift(i);
    });

    return (
      <div className = 'projectTeam'>
        <Row gutter = {16}>
          <Col span = {24} style = {{textAlign:'center'}}>
            <Card loading = {this.state.loading}>
              <Row style = {{marginBottom:0,display: 'flex'}}>
                  <div className = 'statItem' style = {{flex:1}}>
                    <p>进行中的项目</p>
                    <p>{List1.length}</p>
                  </div>
                  <Divider type="vertical"/>
                  <div className = 'statItem' style = {{flex:1}}>
                    <p>本月应完成的项目</p>
                    <p>3</p>
                  </div>
                  <Divider type="vertical" />
                  <div className = 'statItem' style = {{flex:1}}>
                    <p>项目总数</p>
                    <p>{this.state.data.length}</p>
                  </div>
              </Row>
            </Card>
          </Col>
          <Col span = {24} style = {{marginTop:20}}>
            <Card loading = {this.state.loading}>
              <Tabs>
                <TabPane tab={<span>进行中</span>} key="1">
                  <List
                    className="demo-loadmore-list"
                    loading={loading}
                    itemLayout="horizontal"
                    loadMore={loadMore}
                    dataSource={List1}
                    renderItem={item => (
                      <List.Item
                         actions={[<Link to = {'/ProjectInfo?key='+item.project_id} style = {{textAlign:'right'}}>详情</Link>]}
                      >
                        <List.Item.Meta
                          avatar={<Avatar style={{ backgroundColor: item.color, verticalAlign: 'middle' }}>
                            {item.title.substr(3,2)}
                          </Avatar>}
                          title={<p style = {{width:500}}>{item.title}</p>}
                          description={
                            <div><div>{item.task}</div>
                            <div style = {{marginTop:10,paddingRight:20,fontSize:10,color:'#999'}}>{item.name}<Divider type="vertical" style = {{height:10,top:0}}/>{item.endDate}</div>
                            </div>
                          }
                        />
                        
                      </List.Item>
                    )}
                  />
                </TabPane>
                <TabPane tab={<span>完成</span>} key="2">
                    <List
                    className="demo-loadmore-list"
                    loading={loading}
                    itemLayout="horizontal"
                    loadMore={loadMore}
                    dataSource={List2}
                    renderItem={item => (
                      <List.Item
                         actions={[<Link to = {'/ProjectInfo?key='+item.key} style = {{textAlign:'right'}}>详情</Link>]}
                      >
                        <List.Item.Meta
                          avatar={<Avatar style={{ backgroundColor: item.color, verticalAlign: 'middle' }}>
                            {item.title.substr(3,2)}
                          </Avatar>}
                          title={<p style = {{width:500}}>{item.title}</p>}
                          description={
                            <div><div>{item.task}</div>
                            <div style = {{marginTop:10,paddingRight:20,fontSize:10,color:'#999'}}>{item.name}<Divider type="vertical" style = {{height:10,top:0}}/>{item.endDate}</div>
                            </div>
                          }
                        />
                        
                      </List.Item>
                    )}
                  />
                </TabPane>
                <TabPane tab={<span>终止</span>} key="3">
                    <List
                    className="demo-loadmore-list"
                    loading={loading}
                    itemLayout="horizontal"
                    loadMore={loadMore}
                    dataSource={List3}
                    renderItem={item => (
                      <List.Item
                         actions={[<Link to = {'/ProjectInfo?key='+item.key} style = {{textAlign:'right'}}>详情</Link>]}
                      >
                        <List.Item.Meta
                          avatar={<Avatar style={{ backgroundColor: item.color, verticalAlign: 'middle' }}>
                            {item.title.substr(3,2)}
                          </Avatar>}
                          title={<p style = {{width:500}}>{item.title}</p>}
                          description={
                            <div><div>{item.task}</div>
                            <div style = {{marginTop:10,paddingRight:20,fontSize:10,color:'#999'}}>{item.name}<Divider type="vertical" style = {{height:10,top:0}}/>{item.endDate}</div>
                            </div>
                          }
                        />
                        
                      </List.Item>
                    )}
                  />
                </TabPane>
                <TabPane tab={<span>全部</span>} key="4">
                    <List
                    className="demo-loadmore-list"
                    loading={loading}
                    itemLayout="horizontal"
                    loadMore={loadMore}
                    dataSource={List4}
                    renderItem={item => (
                      <List.Item
                         actions={[<Link to = {'/ProjectInfo?key='+item.key} style = {{textAlign:'right'}}>详情</Link>]}
                      >
                        <List.Item.Meta
                          avatar={<Avatar style={{ backgroundColor: item.color, verticalAlign: 'middle' }}>
                            {item.title.substr(3,2)}
                          </Avatar>}
                          title={<p style = {{width:500}}>{item.title}</p>}
                          description={
                            <div><div>{item.task}</div>
                            <div style = {{marginTop:10,paddingRight:20,fontSize:10,color:'#999'}}>{item.name}<Divider type="vertical" style = {{height:10,top:0}}/>{item.endDate}</div>
                            </div>
                          }
                        />
                      </List.Item>
                    )}
                  />
                </TabPane>
              </Tabs>
            </Card>
          </Col>
         </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(ProjectTeam)
